<template>
<ScrollEl class="water-view-container">
    <div class="top-container">
        <UploadReport
            class="upload-report"
            @onUploadSuccess="onUploadSuccess">
        </UploadReport>
        <ChangeReport
            ref="ChangeReport"
            @onChange="data=>{
                queryParams = data;
                getBaseData();
            }">
        </ChangeReport>
    </div>
    <template 
        v-if="baiscData['地层水'] && baiscData['地层水'].length>0">
        <KhdChart
            :reports="baiscData['地层水'] || []"
            :areas="queryParams.areas || []"
            :horizons="queryParams.horizons || []"
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </KhdChart>
        <IonContent
            :reports="baiscData['地层水'] || []"
            :areas="queryParams.areas || []"
            :horizons="queryParams.horizons || []"
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </IonContent>
        <FeaturesIon
            :reports="baiscData['地层水'] || []"
            :areas="queryParams.areas || []"
            :horizons="queryParams.horizons || []"
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </FeaturesIon>
        <Novak
            :reports="baiscData['地层水'] || []"
            :areas="queryParams.areas || []"
            :horizons="queryParams.horizons || []"
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </Novak>
        <!-- <IonNa
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </IonNa>
        <IonGa
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </IonGa>
        <IonK
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </IonK>
        <IonMg
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </IonMg>
        <IonBa
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </IonBa>
        <IonSr
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </IonSr>
        <IonCl
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </IonCl>
        <IonSo2
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </IonSo2>
        <IonBr
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </IonBr>
        <IonB
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </IonB>
        <IonLi
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </IonLi> -->
        <SaveSelect
            :reports="baiscData['地层水'] || []"
            :areas="queryParams.areas || []"
            :horizons="queryParams.horizons || []"
            :fontColor="fontColor"
            :borderColor="borderColor"
            :chartBorderColor="chartBorderColor">
        </SaveSelect>
    </template>
    <Cause
        v-show="baiscData['同位素']"
        :reports="baiscData['地层水'] || []"
        :areas="queryParams.areas || []"
        :horizons="queryParams.horizons || []"
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor"
        :dataList="baiscData['同位素'] || {}">
    </Cause>
    <ChartShs
        v-if="baiscData['酸化水'] && baiscData['酸化水'].length>0"
        :dataList="baiscData['酸化水'] || []"
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor">
    </ChartShs>
    <ChartNjs
        v-if="baiscData['泥浆水'] && baiscData['泥浆水'].length>0"
        :dataList="baiscData['泥浆水'] || []"
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor">
    </ChartNjs>
    <ChartLxs
        v-if="baiscData['凝析水'] && baiscData['凝析水'].length>0"
        :dataList="baiscData['凝析水'] || []"
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor">
    </ChartLxs>
    <ChartOther
        v-if="baiscData['未知类型'] && baiscData['未知类型'].length>0"
        :dataList="baiscData['未知类型'] || []"
        :fontColor="fontColor"
        :borderColor="borderColor"
        :chartBorderColor="chartBorderColor">
    </ChartOther>
    <div 
        v-if="loading"
        class="loading-container">
        <i class="el-icon-loading"></i>
    </div>
</ScrollEl>
</template>
<script>
/*
 地层水判识页面
 */
import ScrollEl from "@/components/ScrollEl";
import UploadReport from "@/components/UploadReport";
import ChangeReport from "@/components/ChangeReport";
import Novak from './components/Novak';
import KhdChart from './components/KhdChart';
import SaveSelect from './components/SaveSelect';
import Cause from './components/Cause';
import IonContent from './components/ionContent';
// import IonNa from './components/IonNa';
// import IonB from './components/IonB';
// import IonBa from './components/IonBa';
// import IonBr from './components/IonBr';
// import IonCl from './components/IonCl';
// import IonGa from './components/IonGa';
// import IonK from './components/IonK';
// import IonMg from './components/IonMg';
// import IonSo2 from './components/IonSo2';
// import IonSr from './components/IonSr';
// import IonLi from './components/IonLi';
import ChartOther from './components/ChartOther';
import ChartShs from './components/ChartShs';
import ChartNjs from './components/ChartNjs';
import ChartLxs from './components/ChartLxs';
import FeaturesIon from './components/FeaturesIon';
import {debounceFn} from '@/common/DebounceAndThrottle';
export default {
    name:'WaterIdent',
    components:{
        ScrollEl,
        UploadReport,ChangeReport,
        Novak,IonContent,
        // IonB,IonBa,IonBr,IonCl,IonGa,IonK,IonMg,IonSo2,IonSr,IonLi,IonNa,
        KhdChart,SaveSelect,
        Cause,
        ChartShs,ChartNjs,ChartLxs,
        FeaturesIon,
        ChartOther,
    },
    data() {
        return {
            loading:false,
            currentReports:[],  //当前选择的报告列表
            queryParams:{},  //当前所选报告的查询参数
            baiscData:{},  //基础数据
            fontColor:'',
            borderColor:'',
            chartBorderColor:'',
        };
    },
    mounted(){
        this.fontColor = getComputedStyle(document.documentElement).getPropertyValue('--font-color');
        this.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--border-color');
        this.chartBorderColor = getComputedStyle(document.documentElement).getPropertyValue('--border-color-chart');
    },
    methods:{
        onUploadSuccess(reportData){  //上传成功后重新获取数据
            console.log(reportData);
            this.$refs.ChangeReport.initData();
        },
        getBaseData:debounceFn(function(){  //获取基础数据判断
            if(!this.queryParams.reports || this.queryParams.reports.length == 0){
                this.baiscData = {};
                return;
            }
            this.loading = true;
            this.$Service.post(
                this.$Api.waterBaisc,
                {
                    "reportNo":this.queryParams.reports.join(","),
                    "reportType":1,
                    'area':this.queryParams.areas.join(','),
                    'horizon':this.queryParams.horizons.join(','),
                },
            ).then(res => {
                this.baiscData = res.data;
            }).catch(() => {
                return;
            }).finally(()=>{
                this.loading = false;
            });
        },150),
    },
};
</script>
<style scoped lang="scss">
.water-view-container{
    width: 100%;
    height: fit-content;
    max-height: 100%;
    box-sizing: border-box;
    display: grid;
    grid-gap: 1rem;
    >.loading-container{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #0000003d;
        font-size: 100px;
        padding: 30px 50px;
        border-radius: 12px;
        color: #ffffff69;
    }
    /deep/input{
        background-color: rgba(255, 255, 255, 0.38);
        border-color: rgba(255, 255, 255, 0.38);
        color: white;
    }
    /deep/table{
        background: linear-gradient(180deg, #031F37 0%, #03316C 100%);
        box-shadow: inset 0px 0px 15px #1b60cc;
    }
    >.top-container{
        width: 100%;
        height: fit-content;
        margin: 0 auto;
        text-align: left;
        color: var(--font-color);
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1px;
        align-items: center;
        border-radius: var(--my-border-radius);
        border: 1px solid var(--border-color);
        box-sizing: border-box;
        padding: 1rem; 
        grid-template-areas: 'one two' 'three three';
        position: sticky;
        top: 0;
        background-color: var(--bg-color);
        z-index: 999;
        >.upload-report{
            height: 40px;
        }
    }
}
</style>
